<template>
	<view class="ai-container">
		<!-- 顶部返回栏 -->
		<view class="ai-header">
			<view class="back-btn" @tap="goBack">
				<uni-icons type="left" size="24" color="#007AFF"></uni-icons>
			</view>
			<view class="ai-title">AI 旅游计划助手</view>
		</view>

		<!-- 问答进度条 -->
		<view class="progress-bar">
			<view class="progress-step" v-for="step in 7" :key="step" :class="{
          'active': currentStep >= step,
          'current': currentStep === step
        }"></view>
		</view>

		<!-- 步骤 1：城市选择 -->
		<view class="ai-content" v-if="currentStep === 1">
			<view class="ai-prompt">不知道怎么玩？让 AI 帮你制定计划吧</view>
			<view class="ai-question">1. 从哪个城市出发到哪个城市旅行？</view>

			<view class="city-selectors">
				<view class="city-input">
					<text>出发城市：</text>
					<input type="text" placeholder="如：北京" v-model="formData.departureCity">
				</view>
				<view class="city-input">
					<text>目的城市：</text>
					<input type="text" placeholder="如：上海" v-model="formData.destinationCity">
				</view>
			</view>
		</view>

		<!-- 步骤 2：旅行天数 -->
		<view class="ai-content" v-else-if="currentStep === 2">
			<view class="ai-question">2. 您计划旅行几天？</view>
			<input type="number" placeholder="请输入天数" v-model="formData.travelDays" class="number-input">
		</view>

		<!-- 步骤 3：旅行时间 -->
		<view class="ai-content" v-else-if="currentStep === 3">
			<view class="ai-question">3. 计划什么时候出发？</view>
			<picker mode="date" :value="formData.travelDate" @change="dateChange">
				<view class="picker">选择日期：{{ formData.travelDate || '请选择' }}</view>
			</picker>
		</view>

		<!-- 步骤 4：预算 -->
		<view class="ai-content" v-else-if="currentStep === 4">
			<view class="ai-question">4. 您的人均预算是多少？</view>
			<view class="budget-options">
				<view v-for="(item, index) in budgetOptions" :key="index" class="budget-option"
					:class="{ 'selected': formData.budget === item.value }" @tap="formData.budget = item.value">
					{{ item.label }}
				</view>
			</view>
		</view>

		<!-- 步骤 5：旅行类型 -->
		<view class="ai-content" v-else-if="currentStep === 5">
			<view class="ai-question">5. 您更喜欢哪种旅行方式？</view>
			<view class="travel-type-options">
				<view v-for="(item, index) in travelTypes" :key="index" class="type-option"
					:class="{ 'selected': formData.travelType === item.value }"
					@tap="formData.travelType = item.value">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 步骤 6：同行人员 -->
		<view class="ai-content" v-else-if="currentStep === 6">
			<view class="ai-question">6. 同行人员有哪些？</view>
			<view class="companion-options">
				<view v-for="(item, index) in companionOptions" :key="index" class="companion-option"
					:class="{ 'selected': formData.companion.includes(item.value) }"
					@tap="toggleCompanion(item.value)">
					{{ item.label }}
				</view>
			</view>
		</view>

		<!-- 步骤 7：计划名称 -->
		<view class="ai-content" v-else-if="currentStep === 7">
			<view class="ai-question">7. 为该计划起个名称吧？</view>

			<view class="city-selectors">
				<view class="city-input">
					<text>计划名称：</text>
					<input type="text" placeholder="如：广州三日游" v-model="formData.name">
				</view>
			</view>
		</view>

		<!-- 底部选择按钮 -->
		<view class="button-group">
			<button v-if="currentStep > 1" class="prev-btn" @tap="prevStep">上一步</button>
			<button class="next-btn" @tap="nextStep">
				{{ currentStep === 7 ? '生成计划' : '下一步' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 1,
				formData: {
					name: "",
					departureCity: '',
					destinationCity: '',
					travelDays: '',
					travelDate: '',
					budget: '',
					travelType: '',
					companion: []
				},
				budgetOptions: [{
						label: '1000 元以下',
						value: 'low'
					},
					{
						label: '1000 - 3000 元',
						value: 'medium'
					},
					{
						label: '3000 元以上',
						value: 'high'
					}
				],
				travelTypes: [{
						label: '自由行',
						value: 'free',
						icon: '/static/icon/zyx.png'
					},
					{
						label: '跟团游',
						value: 'group',
						icon: '/static/icon/gty.png'
					},
					{
						label: '自驾游',
						value: 'self - drive',
						icon: '/static/icon/zjy.png'
					}
				],
				companionOptions: [{
						label: '独自一人',
						value: 'alone'
					},
					{
						label: '情侣/夫妻',
						value: 'couple'
					},
					{
						label: '家人',
						value: 'family'
					},
					{
						label: '朋友',
						value: 'friends'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			nextStep() {
				if (this.currentStep < 7) {
					this.currentStep++
				} else {
					this.generatePlan()
				}
			},
			prevStep() {
				if (this.currentStep > 1) {
					this.currentStep--
				}
			},
			dateChange(e) {
				this.formData.travelDate = e.detail.value
			},
			toggleCompanion(value) {
				const index = this.formData.companion.indexOf(value)
				if (index === -1) {
					this.formData.companion.push(value)
				} else {
					this.formData.companion.splice(index, 1)
				}
			},
			generatePlan() {
				uni.showLoading({
					title: 'AI 生成中...'
				});

				// 转换预算
				let budgetValue;
				switch (this.formData.budget) {
					case 'low':
						budgetValue = 1000;
						break;
					case 'medium':
						budgetValue = 2000;
						break;
					case 'high':
						budgetValue = 3000;
						break;
					default:
						budgetValue = 0;
				}

				// 转换旅行类型
				let transportationValue;
				switch (this.formData.travelType) {
					case 'free':
						transportationValue = '自由行';
						break;
					case 'group':
						transportationValue = '跟团游';
						break;
					case 'self - drive':
						transportationValue = '自驾游';
						break;
					default:
						transportationValue = '';
				}

				// 计算同行人数
				let numberOfPeople = 0;
				if (this.formData.companion.includes('alone')) {
					numberOfPeople = 1;
				} else if (this.formData.companion.includes('couple')) {
					numberOfPeople = 2;
				} else if (this.formData.companion.includes('family') || this.formData.companion.includes('friends')) {
					numberOfPeople = 3; // 假设家人或朋友同行至少 3 人
				}

				const requestData = {
					name: this.formData.name,
					date: this.formData.travelDate,
					departure_city: this.formData.departureCity,
					destination_city: this.formData.destinationCity,
					duration_days: parseInt(this.formData.travelDays),
					budget: budgetValue,
					mode_of_transportation: transportationValue,
					main_activity: '吃喝玩乐',
					number_of_people: numberOfPeople,
					uid: String(uni.getStorageSync('uid'))
				};
				console.log(requestData.uid)
				const token = uni.getStorageSync('token');

				uni.request({
					url: 'https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/ai',
					method: 'POST',
					header: {
						'Authorization': `Bearer ${token}`,
						'Content-Type': 'application/json'
					},
					data: requestData,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.navigateTo({
								url: `/pages/ai-result/ai-result?data=${JSON.stringify(res.data)}`
							});
						} else {
							uni.showToast({
								title: '生成计划失败，请稍后重试',
								icon: 'error'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '网络请求失败，请检查网络连接',
							icon: 'error'
						});
						console.error('请求失败：', err);
					}
				});
			}
		},
		onLoad(){
			if (uni.getStorageSync('token') == '') {
			    uni.reLaunch({
			        url: '/pages/login/login'
			    })
			}
		}
	}
</script>

<style>
	.ai-container {
		padding: 2rem;
		background-color: #f9fafb;
		min-height: 100vh;
		font-family: 'Inter', sans-serif;
	}

	.ai-header {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	}

	.back-btn {
		margin: 0.75rem;
		margin-right: 0;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.back-btn:hover {
		transform: scale(1.1);
	}

	.ai-title {
		font-size: 1.25rem;
		font-weight: 600;
		margin-left: 1rem;
		color: #1f2937;
	}

	/* 进度条样式 */
	.progress-bar {
		display: flex;
		justify-content: space-between;
		padding: 0 0.75rem;
		margin-bottom: 2rem;
	}

	.progress-step {
		height: 0.25rem;
		flex: 1;
		margin: 0 0.25rem;
		background-color: #e5e7eb;
		border-radius: 0.125rem;
		transition: all 0.3s;
	}

	.progress-step.active {
		background-color: #3b82f6;
	}

	.progress-step.current {
		height: 0.375rem;
		margin-top: -0.0625rem;
		background-color: #3b82f6;
	}

	/* 内容区域 */
	.ai-content {
		background-color: #ffffff;
		border-radius: 0.75rem;
		padding: 1.5rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		margin-bottom: 1.5rem;
		transition: transform 0.2s ease;
	}

	.ai-content:hover {
		transform: translateY(-0.25rem);
	}

	.ai-prompt {
		font-size: 1rem;
		color: #3b82f6;
		margin-bottom: 1.5rem;
		font-weight: 500;
	}

	.ai-question {
		font-size: 1rem;
		font-weight: 500;
		margin-bottom: 1.5rem;
		color: #1f2937;
	}

	.city-selectors {
		margin-bottom: 1rem;
	}

	.city-input {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}

	.city-input text {
		width: 6rem;
		color: #4b5563;
	}

	.city-input input {
		flex: 1;
		border-bottom: 1px solid #e5e7eb;
		padding: 0.5rem 0;
		font-size: 1rem;
		color: #1f2937;
		transition: border-color 0.2s ease;
	}

	.city-input input:focus {
		border-color: #3b82f6;
		outline: none;
	}

	.number-input,
	.text-input {
		width: 100%;
		border-bottom: 1px solid #e5e7eb;
		padding: 0.5rem 0;
		margin-bottom: 1rem;
		font-size: 1rem;
		color: #1f2937;
		transition: border-color 0.2s ease;
	}

	.number-input:focus,
	.text-input:focus {
		border-color: #3b82f6;
		outline: none;
	}

	.picker {
		padding: 0.75rem 0;
		border-bottom: 1px solid #e5e7eb;
		font-size: 1rem;
		color: #1f2937;
		cursor: pointer;
		transition: border-color 0.2s ease;
	}

	.picker:hover {
		border-color: #3b82f6;
	}

	/* 选项样式 */
	.budget-options,
	.companion-options {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}

	.budget-option,
	.companion-option {
		padding: 0.75rem 1.25rem;
		border: 1px solid #e5e7eb;
		border-radius: 1.5rem;
		background-color: #f9fafb;
		font-size: 0.875rem;
		color: #4b5563;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.budget-option:hover,
	.companion-option:hover {
		background-color: #f3f4f6;
	}

	.budget-option.selected,
	.companion-option.selected {
		background-color: #3b82f6;
		color: #ffffff;
		border-color: #3b82f6;
	}

	.travel-type-options {
		display: flex;
		justify-content: space-around;
		margin-bottom: 1.5rem;
	}

	.type-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0.75rem;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.type-option:hover {
		transform: scale(1.05);
	}

	.type-option image {
		width: 3.125rem;
		height: 3.125rem;
		margin-bottom: 0.5rem;
	}

	.type-option.selected {
		color: #3b82f6;
	}

	/* 按钮组 */
	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.5rem;
	}

	.prev-btn {
		background-color: #ffffff;
		color: #3b82f6;
		border: 1px solid #3b82f6;
		border-radius: 1.5rem;
		width: 48%;
		padding: 0.75rem 0;
		font-size: 1rem;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.prev-btn:hover {
		background-color: #f3f4f6;
	}

	.next-btn {
		background-color: #3b82f6;
		color: #ffffff;
		border-radius: 1.5rem;
		width: 48%;
		padding: 0.75rem 0;
		font-size: 1rem;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.next-btn:hover {
		background-color: #2563eb;
	}
</style>